<template>
    <view class="pageWrapper" :style="{ '--color': color }" v-if="pageData">
        <status-bar title="确定订单"></status-bar>

        <view class="deliveryBox">
            <view class="tabWay" v-if="deliverysArr.length > 1">
                <view
                    class="Tabs"
                    :class="{
                        subint: index == selectedIndex - 1,
                        addint: index == selectedIndex + 1,
                        Active: index == selectedIndex
                    }"
                    @click="selectTab(index, item)"
                    v-for="(item, index) in deliverysArr"
                    :key="index"
                >
                    <view class="TabItem">{{ getDeliveryName(item) }}</view>
                </view>
            </view>

            <view class="Store" v-if="delivery == 2">
                <view class="Content">
                    <view class="StoreBox">
                        <view class="StoreBox_name">
                            <view class="iconfont icon-store size36 m-right20 m-left4"></view>
                            <text class="Store_name">{{ shop.name }}</text>
                        </view>
                        <view class="StoreBox_address">
                            <view class="iconfont icon-B size38 m-right20 m-left4"></view>
                            <text class="Store_address">{{ shop.address }}</text>
                        </view>
                    </view>
                    <!-- <view class="iconfont icon-xiangyouxiayiye color_99 size26"></view> -->
                </view>
                <!-- <view class="Place_info">
                    <text class="info_title">姓名：</text>
                    <input type="text" v-model="default_address.v_name" class="info_input" placeholder="请输入购买人姓名" />
                </view>
                <view class="Place_info">
                    <text class="info_title">电话：</text>
                    <input type="number" v-model="default_address.v_tel" maxlength="11" class="info_input" placeholder="请输入购买人电话" />
                </view> -->
            </view>

            <!-- 快递 -->
            <view class="WayToggle" v-if="delivery == 1">
                <view class="expressage" @click="showAddress = true">
                    <block v-if="Address.Aaddress">
                        <view class="Info">
                            <view class="downtown" v-if="Address.Aregion">
                                <text class="downtown_txt">{{ Address.Aregion }}</text>
                                <view class="downtown_More">默认</view>
                            </view>
                            <text class="address">{{ Address.Aaddress }}</text>
                            <view class="contact">
                                <text class="contact_Name">{{ Address.Aname }}</text>
                                <text class="contact_Tel">{{ Address.Amobile || Address.uTel }}</text>
                            </view>
                        </view>
                        <text class="iconfont icon-xiangyouxiayiye color_99 size26"></text>
                    </block>

                    <view class="initAddress" v-else>
                        <view class="iconfont icon-tianjia"></view>
                        <text class="color_99 size28 m-top20">添加地址</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="payMode" v-if="payMode.length > 1">
            <text class="black size30 bold500">支付方式</text>
            <view class="row m-top24">
                <view class="paylist" :class="{ Active: item.payType == payType, noActive: item.money === 0 }" v-for="(item, index) in payMode" :key="index" @click="changePay(item)">
                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
                    <text class="size28 m-top10">{{ item.title }}</text>
                    <view class="payMoney">
                        <text class="color_99 size26" v-if="item.payType != 1">余额:</text>
                        <text class="money">{{ item.money }}</text>
                        <text class="color_99 size20 m-left4" v-if="item.payType != 1">(元)</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="Product" v-for="(item, index) in list" :key="index">
            <view class="Shop">
                <image :src="$imgUrls(item.logo)" mode="aspectFill" class="shopLogo" v-if="item.logo"></image>
                <text class="shopName">{{ item.name }}</text>
            </view>
            <view class="list" v-for="(V, Vindex) in item.cars" :key="Vindex">
                <image :src="$imgUrls(V.goodsImg)" mode="aspectFill" class="goods_img"></image>
                <view class="goodsInfo">
                    <text class="goods_title ellipsis_2">{{ V.goods_name }}</text>
                    <text class="color_99 size28 ellipsis" v-if="V.operation_text">{{ V.operation_text }}</text>
                    <view class="color_99 size28" v-if="V.weight > 0">重量：{{ V.weight }}kg</view>
                    <view class="goods_Bot">
                        <view class="d-flex">
                            <view class="Pricesymbol color_ff4">￥</view>
                            <text class="Price color_ff4">{{ V.price | goodsOneOldPrice }}</text>
                        </view>
                        <view class="Controls">
                            <view class="Controls_icon subtract" @click.stop="increase(1, V)">
                                <view class="iconfont icon-jianhao size28"></view>
                            </view>
                            <view class="Controls_num">{{ V.num }}</view>
                            <view class="Controls_icon add" @click.stop="increase(2, V)">
                                <view class="iconfont icon-jiahao size28"></view>
                            </view>
                        </view>
                        <!-- <text class="size28 color_99" v-else>x{{ V.num }}</text> -->
                    </view>
                </view>
            </view>

            <view class="tiemINE">
                <text class="black size30">取餐时间</text>
                <view class="d-flex f-column a-center" @click="ChangeTime(item, index)">
                    <text class="black size32 bold500">{{ item.dateItem.title }}</text>
                    <text class="black size26 bold500">{{ item.dateItem.date }}</text>
                </view>
            </view>
        </view>

        <view class="wrapper">
            <view class="wrapper_view">
                <view class="AllBox">
                    <view class="row j-sb a-center">
                        <view class="d-flex a-center">
                            <text class="color_33 size32">商品总价</text>
                            <text class="color_99 size28 m-left10">共{{ pageData.cartNum }}件商品</text>
                        </view>
                        <view class="d-flex">
                            <view class="Pricesymbol">￥</view>
                            <text class="Price">{{ pageData.payment }}</text>
                        </view>
                    </view>
                    <!-- <text class="color_99 h6" v-if="pageData.allowBuyTitle">{{ pageData.allowBuyTitle }}</text> -->
                </view>

                <view class="freight" v-if="price_info.used_jifen != 0">
                    <view class="flex-1 d-flex a-center">
                        <text class="color_33 size32">会员权益</text>

                        <text class="color_99 size28 m-left10" v-if="price_info.jifen_yue">积分余额 {{ price_info.jifen_yue }}分</text>
                    </view>
                    <view class="d-flex a-center" @click="showPopup = true" v-if="price_info.deductionText">
                        <text class="color size28">{{ price_info.deductionText }}</text>
                        <view class="iconfont icon-xiangyouxiayiye color size28 m-left10"></view>
                    </view>
                </view>
            </view>

            <view class="byJob">
                <text class="color_33 size34 m-right10">合计：</text>
                <view class="d-flex">
                    <view class="Pricesymbol">￥</view>
                    <text class="Price">{{ pageData.payment == 0 ? '0.00' : parseFloat(pageData.payment).toFixed(2) }}</text>
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="footerBox">
                <view class="Copewith">
                    <text class="color_33 size34 bold500">应付：</text>
                    <view class="d-flex">
                        <view class="withsymbol color_ff4 bold500">￥</view>
                        <text class="withPrice color_ff4 bold500">
                            {{ price_info.payment == 0 ? '0.00' : parseFloat(price_info.payment).toFixed(2) }}
                        </text>
                    </view>
                </view>
                <view class="subMit bgcolor" @click="Continue">立即支付</view>
            </view>
        </view>

        <u-picker :show="show" @cancel="show = false" @confirm="confirm" :defaultIndex="defaultIndex" :columns="columns" keyName="title"></u-picker>

        <u-popup :show="showPopup" :round="15" closeable @close="showPopup = false">
            <view class="showPopup">
                <text class="row j-centert p-top10 p-bot20 size36 black bold500">会员权益</text>

                <view class="rows size28 color_33">{{ price_info.deductionDetails }}</view>
            </view>
        </u-popup>

        <Address :Address="Address" v-if="showAddress" @close="showAddress = false" @Update="getOldAddress"></Address>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Address from './components/Address.vue';
    export default {
        components: {
            Address
        },
        data() {
            return {
                showAddress: false, //地址
                deliverysArr: [2, 1], //2 门店 1快递
                delivery: 2,
                selectedIndex: 0,
                Address: '',
                car_id: '',
                shop_id: '',
                shop: '',
                default_address: '',
                list: [],
                pageData: '',
                price_info: '',
                show: false,
                columns: [],
                food_category_id: 0,
                food_category_ids: '',
                showPopup: false,
                defaultIndex: [],
                carIds: '',
                payType: 1, // 1 微信支付  98 饭卡支付
                payMode: []
            };
        },
        onLoad(opt) {
            if (opt.shop_id) this.shop_id = opt.shop_id;
            if (opt.car_id) this.car_id = opt.car_id;
            if (opt.food_category_id) this.food_category_id = opt.food_category_id;
            if (opt.food_category_ids) this.food_category_ids = opt.food_category_ids;
            this.getMealPayInfo();
        },
        onShow() {
            this.getOldAddress();
        },
        methods: {
            getMealPayInfo() {
                this.$http
                    .get({
                        url: '/GnmApi/getMealPayInfo',
                        data: {
                            car_id: this.car_id,
                            shop_id: this.shop_id,
                            food_category_id: this.food_category_id,
                            food_category_ids: this.food_category_ids,
                            payType: this.payType
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const reuslt = res.data;
                        if (!reuslt) return this.$back();
                        this.carIds = reuslt.carIds;
                        this.shop = reuslt.shop;
                        this.default_address = reuslt.default_address;
                        this.price_info = reuslt.price_info;
                        this.pageData = reuslt;
                        this.payMode = reuslt.payMode || [];
                        const list = reuslt.list || [];

                        list.forEach((item) => {
                            item.dateItem = '';
                            if (item.select_time) {
                                item.select_time.forEach((n) => {
                                    if (n.selected == 1) item.dateItem = n;
                                });
                            }
                        });
                        this.list = list;
                    });
            },

            getOldAddress() {
                this.$http
                    .get({
                        url: '/SRA_simMallApi/getOldAddress',
                        data: {
                            type: 3,
                            delivery: 1,
                            shop_id: this.shop_id,
                            food_category_id: this.food_category_id,
                            food_category_ids: this.food_category_ids
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.Address = result;
                    });
            },

            ChangeTime(item, index) {
                if (item.select_time) this.columns = [[...item.select_time]];
                const Index = item.select_time.findIndex((n) => n.selected == 1);
                this.defaultIndex = [[Index]];
                this.food_category_id = item.food_category_id;
                this.show = true;
            },

            confirm(e) {
                const Index = this.list.findIndex((n) => n.food_category_id == this.food_category_id);
                const value = e.value[0].value;

                this.$http
                    .post({
                        url: '/GnmApi/modifyMealTime',
                        data: {
                            shop_id: this.shop_id,
                            food_category_id: this.food_category_id,
                            food_category_ids: this.food_category_ids,
                            value
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.getMealPayInfo();
                    });
                this.list[Index].dateItem = e.value[0];
                this.show = false;
            },

            increase(Type, item) {
                if (Type == 1 && item.num == 1) return this.delCart(item.car_id, item.food_category_id);
                let num;
                if (Type == 2) {
                    num = +item.num + 1;
                } else {
                    num = +item.num - 1;
                }
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/incCart',
                        data: {
                            car_id: item.car_id,
                            num,
                            food_category_id: item.food_category_id
                        }
                    })
                    .then((res) => {
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        this.getMealPayInfo();
                    });
            },

            delCart(car_id, food_category_id) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/delCart',
                        data: {
                            car_id,
                            food_category_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.errcode != 100) return this.$Toast(res.msg);
                        this.getMealPayInfo();
                    });
            },
            Continue() {
                const pattern = /^1[3-9]\d{9}$/;
                let uname;
                let utel;
                if (this.delivery == 1) {
                    if (!this.Address.Aaddress) return this.$Toast('请选择收货地址');
                    uname = this.Address.Aname;
                    utel = this.Address.Amobile;
                }
                if (this.delivery == 2) {
                    // if (!this.default_address.v_name) return this.$Toast('请输入姓名');
                    // if (!this.default_address.v_tel) return this.$Toast('请输入电话');
                    // if (!this.$reg.phone.test(this.default_address.v_tel)) return this.$Toast('输入电话号码有误');
                    uname = this.default_address.v_name ? this.default_address.v_name : this.userInfo.uname;
                    utel = this.default_address.v_tel ? this.default_address.v_tel : this.userInfo.phone;
                }

                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/storePayCart',
                        data: {
                            delivery: this.delivery,
                            car_id: this.carIds,
                            uname,
                            utel,
                            shop_id: this.shop_id,
                            totalMoney: this.pageData.payment,
                            receivingAddress: this.Address.Aregion + this.Address.Aaddress,
                            food_category_id: this.food_category_id,
                            food_category_ids: this.food_category_ids
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.pay_money(res.payID);
                    });
            },
            pay_money(payID) {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/accountPay/cashierStorePageAjax',
                        data: {
                            orderAesStr: payID,
                            payType: this.payType,
                            openId: this.openid
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        if (this.payType != 1) {
                            this.$Toast(res.msg);
                            this.$rectTo('/pages/index/orderList?status=0');
                            return;
                        }
                        this.$pop.getPayment(res.data).then((result) => {
                            if (result) this.$rectTo('/pages/index/orderList?status=0');
                        });
                    });
            },
            getDeliveryName(Val) {
                const num = +Val;
                const wayMap = {
                    1: this.pageData.toExpressTitle || '快递上门',
                    2: this.pageData.toStoreTitle || '门店自提',
                    3: this.pageData.toIntraCityServiceTitle || '外卖',
                    5: this.pageData.toWarehouseTitle || '暂存仓库',
                    6: this.pageData.toSelfDelivery || '自有物流'
                };
                return wayMap[num] || '';
            },
            selectTab(index, item) {
                if (this.selectedIndex == index) return;
                this.selectedIndex = index;
                this.delivery = item;
            },
            changePay(item) {
                if (item.payType != 1 && item.money == 0) return;
                this.payType = item.payType;
                this.getMealPayInfo();
            }
        },
        computed: {
            ...mapState(['color', 'vid', 'openid', 'userInfo'])
        },
        filters: {
            goodsOneOldPrice(Val) {
                let Price = +Val;
                return Price.toFixed(2);
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .payMode {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        margin: 20rpx auto 0;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        .paylist {
            flex: 1;
            height: 240rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid $page;
            margin: 0 20rpx;
            border-radius: 10rpx;
            color: #000;

            .Img {
                width: 80rpx;
                height: 80rpx;
                margin-top: 10rpx;
            }
            .payMoney {
                width: 100%;
                height: 50rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                .money {
                    color: #999;
                    font-size: 26rpx;
                }
            }
        }
        .Active {
            border: 1px solid var(--color);
        }
        .noActive {
            color: #ccc;
            .money {
                color: #ccc !important;
            }
        }
    }
    .showPopup {
        width: 100%;
        padding: 30rpx 30rpx 100rpx 30rpx;
        display: flex;
        flex-direction: column;
    }
    .pageWrapper {
        // #ifdef H5
        padding-bottom: 160rpx;
        // #endif
        // #ifdef MP-WEIXIN
        padding-bottom: 250rpx;
        // #endif
    }
    @mixin flexCenter {
        display: flex;
        align-items: center;
    }
    @mixin wrapper {
        width: 100%;
        padding: 24rpx;
        background-color: #ffffff;
    }
    .deliveryBox {
        width: 710rpx;
        margin: 30rpx auto 0;
        border-radius: 10rpx;
        .tabWay {
            width: 100%;
            display: flex;
            align-items: flex-end;
            position: relative;

            .Tabs {
                flex: 1;

                position: relative;
                z-index: 10;
                overflow: hidden;

                .TabItem {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 28rpx;
                    color: #000;
                    height: 70rpx;
                    background-color: rgba(249, 243, 232, 0.5);
                    // background-color: #f9f3e8;
                }
            }

            .Active {
                border-radius: 20rpx;
                font-weight: bold;

                .TabItem {
                    font-size: 32rpx;
                    height: 90rpx;
                    background-color: #ffffff;
                }
            }

            .subint {
                border-radius: 0 0 20rpx 0;
            }

            .addint {
                border-radius: 0 0 0 20rpx;
            }
        }

        .tabWay::before {
            content: '';
            background-color: #ffffff;
            width: 100%;
            height: 70rpx;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            border-radius: 20rpx 20rpx 0 0;
        }
    }
    .Store {
        @include wrapper;
        width: 100%;

        // margin: 24rpx auto 0;
        border-radius: 0 0 10rpx 10rpx;
        .Content {
            width: 100%;
            // border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
            padding-bottom: 24rpx;
            margin-bottom: 10rpx;
            display: flex;
            align-items: center;

            .StoreBox {
                flex: 1;
                display: flex;
                flex-direction: column;

                .StoreBox_name {
                    @include flexCenter;

                    .shopLogo {
                        width: 36rpx;
                        height: 36rpx;
                        border-radius: 6rpx;
                        margin-right: 14rpx;
                    }

                    .Store_name {
                        color: #000;
                        font-size: 34rpx;
                        font-weight: bold;
                    }
                }

                .StoreBox_address {
                    display: flex;
                    padding-top: 20rpx;

                    .Store_address {
                        color: #333;
                        font-size: 30rpx;
                    }
                }
            }
        }

        .Place_info {
            width: 100%;
            display: flex;
            align-items: center;

            .info_title {
                color: #333;
                font-size: 30rpx;
            }

            .info_input {
                flex: 1;
                height: 70rpx;
                padding-left: 10rpx;
                color: #333;
                font-size: 30rpx;
                font-weight: normal;
            }
        }
    }

    .WayToggle {
        @include wrapper;

        .expressage {
            display: flex;
            align-items: center;

            .Info {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-right: 20rpx;

                .downtown {
                    display: flex;
                    align-items: center;

                    &_txt {
                        color: #333;
                        font-size: 28rpx;
                    }

                    &_More {
                        background-color: var(--color);
                        color: #ffffff;
                        font-size: 20rpx;
                        padding: 0 10rpx;
                        border-radius: 20rpx;
                        margin-left: 10rpx;
                    }
                }

                .address {
                    color: #000;
                    font-size: 34rpx;
                    margin-top: 14rpx;
                    font-weight: bold;
                }

                .contact {
                    display: flex;
                    align-items: center;
                    margin-top: 14rpx;

                    &_Name {
                        color: #333;
                        font-size: 28rpx;
                        margin-right: 24rpx;
                    }

                    &_Tel {
                        color: #333;
                        font-size: 28rpx;
                    }
                }
            }

            .initAddress {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 10rpx 0;

                .icon-tianjia {
                    color: #999;
                    font-size: 68rpx;
                }
            }
        }
    }

    .Product {
        width: 710rpx;
        padding: 24rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;
        margin: 20rpx auto 0;

        .Shop {
            display: flex;
            align-items: center;
            // margin-bottom: 30rpx;

            .shopLogo {
                width: 46rpx;
                height: 46rpx;
                border-radius: 6rpx;
                margin-right: 14rpx;
            }

            .shopName {
                color: #333;
                font-size: 32rpx;
            }
        }

        .list {
            width: 100%;
            display: flex;
            margin-top: 40rpx;

            .goods_img {
                width: 200rpx;
                height: 200rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }

            .goodsInfo {
                flex: 1;
                height: 200rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .goods_title {
                    color: #000;
                    font-size: 30rpx;
                }

                .goods_Bot {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .Controls {
                        display: flex;
                        align-items: center;

                        &_icon {
                            width: 54rpx;
                            height: 50rpx;
                            background-color: #f3f3f3;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 28rpx;

                            .iconfont {
                                color: #323232;
                            }
                        }

                        .prohibit {
                            background-color: #f8f8f8 !important;

                            .iconfont {
                                color: #cccccc;
                            }
                        }

                        .subtract {
                            border-radius: 6rpx 0 0 6rpx;
                        }

                        .add {
                            border-radius: 0 6rpx 6rpx 0;
                        }

                        &_num {
                            padding: 0 20rpx;
                            min-width: 60rpx;
                            height: 50rpx;
                            background-color: #f3f3f3;
                            margin: 0 4rpx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: 28rpx;
                            color: #3a3a3a;
                        }
                    }
                }
            }
        }
        .tiemINE {
            width: 100%;
            padding: 20rpx;
            background-color: $page;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30rpx;
        }
        .byJob {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 40rpx;

            .allNum {
                color: #333;
                font-size: 28rpx;
            }
        }
    }

    .Price {
        font-size: 36rpx;
    }
    .Pricesymbol {
        font-size: 26rpx;
        margin-top: 10rpx;
    }
    .wrapper {
        width: 710rpx;
        background-color: #ffffff;
        padding: 10rpx 24rpx 24rpx 24rpx;
        margin: 30rpx auto 0;
        border-radius: 10rpx;

        .wrapper_view {
            border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
            padding-bottom: 20rpx;
        }

        .AllBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20rpx 0;
        }

        .freight {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 0;
        }

        .coupon {
            width: 100%;
            padding: 20rpx 0;
            display: flex;
            align-items: center;

            .couponBox {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }

        .byJob {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 30rpx;

            .allNum {
                color: #333;
                font-size: 26rpx;
            }
        }
    }
    .footer {
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid #f8f8f8;

        .footerBox {
            width: 100%;
            height: 120rpx;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .Copewith {
                display: flex;
                align-items: center;

                .withsymbol {
                    font-size: 26rpx;
                    margin-top: 24rpx;
                }

                .withPrice {
                    font-size: 52rpx;
                }
            }

            .subMit {
                width: 220rpx;
                height: 80rpx;

                color: #ffffff;
                font-size: 32rpx;
                border-radius: 40rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>
